<!--
 * 
 * @Description:
-->

<template>
  <div style="overflow-y: scroll">
    <div class="pumpBox" :style="'width:' + props.tabContentlist.length * 350 + 'px'">
      <div class="pumpBoxContent" v-for="item in props.tabContentlist" :key="item.id">
        <a-card class="pumpBox-card">
          <div class="pumpBox-card-header">{{ item.name }}</div>
          <div class="pumpBox-card-body">
            <ul>
              <li
                v-for="(el, index) in item.children"
                :key="index"
                :class="el.workingState == '运行' ? 'runtest' : el.workingState == '待机' ? 'standby' : 'offline'"
                @click="openCounte(el)"
              >
                <div>
                  <PauseCircleOutlined v-if="el.workingState == '运行'" />
                <PlayCircleOutlined v-else-if="el.workingState == '待机'" />
                <EllipsisOutlined v-else />
               
                  <span style="margin-left: 5px"> {{ el.stationName }}</span>
                </div>
                <span>{{ el.workingState }}</span>
            
              </li>
            </ul>
          </div>
        </a-card>
      </div>
    </div>
  </div>
</template>
  <script setup name="tabContent">
import { ref } from 'vue';
import { pumpStationOperationApi } from '/@/api/main/statistics/pump-station-operation-api';

const props = defineProps({
  tabContentlist: Array,
  default: () => [],
});

const pageDate = ref([]);
const aa = ref('');
const emit = defineEmits({ activeChange: null });
const pumpList = ref([])

// 获取全部泵站

async function getPumpList(param){
  let res = await pumpStationOperationApi.pumpWorkStatus(param)
  pumpList.value = res.data
}

const initData =async (key) => {
  await getPumpList({areaId:key})
  aa.value = key + 1;
  pageDate.value = [];
  props.tabContentlist.forEach((item) => {
  let arr = pumpList.value.filter(i=> i.managementStationId == item.departmentId)
  // 排序
  if(arr.length>0){
    arr.forEach(el=>{
        if (el.workingState == '运行') {
          el.sorter = 1
        }
        if (el.workingState == '待机') {
          el.sorter = 2
        }
        if (el.workingState == '离线') {
          el.sorter = 3
        }
      });
    item.children = arr.sort((a, b) => a.sorter - b.sorter)
  }

  });
};
const openCounte = (record) => {
  // 统一数据，方便传参使用
  record.name = record.stationName;
  record.id = record.stationId;
  emit('activeChange',record);
};
// 抛出函数
defineExpose({
  initData,
});
</script>

  <style >
.pumpBox {
  height: 77.4vh;
  display: flex;
  overflow-y: auto;
}
.pumpBox .pumpBox-card .ant-card-body {
  padding: 0 !important;
}
.pumpBox .pumpBoxContent {
  height: 100%;
  width: 350px !important;
}
.pumpBox .pumpBox-card {
  height: 99%;
  /* margin-right: 16px; */
}
.pumpBox .pumpBox-card-body {
  padding: 8px;
  height: 71vh;
  overflow-y: auto;
}
.pumpBox .pumpBoxContent:nth-child(odd) .pumpBox-card .pumpBox-card-header {
  height: 42px;
  line-height: 42px;
  background: #019688;
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
.pumpBox .pumpBoxContent:nth-child(even) .pumpBox-card .pumpBox-card-header {
  height: 42px;
  line-height: 42px;
  background: #1e9fff;
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
/*#toolbar, .pumpBox-card{*/
/*    width: 99% !important;*/
/*}*/
.pumpBox .pumpBox-table-tool {
  display: none;
}
.pumpBox ul {
  padding: 0;
}
.pumpBox li {
  height: 42px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pumpBox .runtest {
  cursor: pointer;
  font-size: 14px;
  height: 24px;
  line-height: 24px;
  background: #5fb878;
  color: #ffffff;
  padding: 8px;
  margin: 8px 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pumpBox .stoptest {
  cursor: pointer;
  height: 24px;
  font-size: 14px;
  line-height: 24px;
  color: #ff5722;
  border: 1px solid #ff5722;
  padding: 8px;
  margin: 8px 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pumpBox .offline {
  cursor: pointer;
  height: 24px;
  font-size: 14px;
  line-height: 24px;
  color: #595959;
  border: 1px solid #bbbbbb;
  padding: 8px;
  margin: 8px 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pumpBox .standby {
  cursor: pointer;
  height: 24px;
  font-size: 14px;
  line-height: 24px;
  /*color: #4766d9;*/
  background: #4766d9;
  color: #ffffff;
  border: 1px solid #4766d9;
  padding: 8px;
  margin: 8px 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pumpBox .runtest i,
.pumpBox .stoptest i,
.pumpBox .offline i,
.pumpBox .standby i {
  font-size: 20px;
}
.pumpBox xm-select {
  height: 30px;
  min-height: 30px;
  line-height: 30px;
}
.pumpBox xm-select .xm-label .xm-label-block {
  height: 22px;
  line-height: 22px;
}
.pumpBox .pumpJump .pumpBox-layer-title {
  background: #019688b5;
  color: #333;
  border: none;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: transparent;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #c1c1c1;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8;
}
</style>

